#content .documentableFilter {
  display: flex;
  flex-wrap: wrap;
  z-index: 1;
  row-gap: calc(2 * var(--base-spacing));
  position: sticky;
  top: var(--header-height);
  padding: calc(2 * var(--base-spacing)) 0;
  padding-left: 28px;
  margin-bottom: calc(3 * var(--base-spacing));
  margin-left: -28px;
  background-color: var(--background-main);
}

.filtersContainer {
  display: flex;
  flex-wrap: wrap;
  row-gap: calc(2 * var(--base-spacing));
}

.filterableInput {
  background-color: var(--background-main);
  color: var(--action-primary-content-active);
  background-image: url("../../../images/icon-buttons/search/dark/default.svg");
  background-repeat: no-repeat;
  padding: calc(2 * var(--base-spacing)) calc(2 * var(--base-spacing))
    calc(2 * var(--base-spacing)) calc(5 * var(--base-spacing));
  border-radius: 4px;
  background-size: 16px;
  background-position: 10px 15px;
  border: none;
}

.filterableInput:focus-visible {
  border: none;
  outline: none;
}

.filterableInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  background: url("../../../images/icon-buttons/close/light/default.svg")
    no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

.theme-dark .filterableInput::-webkit-search-cancel-button {
  background: url("../../../images/icon-buttons/close/dark/default.svg")
    no-repeat 50% 50%;
}

.filterableInput:focus::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: all;
}

.filterableInput.dark::-webkit-search-cancel-button {
  filter: invert(1);
}
